import React, { FC } from 'react'
import { IconCheckbox, ItemLabelWrap } from './style'
import { SelectedModel, useSinglePollStore } from './store'
import shallow from 'zustand/shallow'
import { Avatar } from '@/components/Avatar'

export const ListItem: FC<SelectedModel> = (props) => {
	const { mcc, status, uuid } = props
	const { itemHandle, removeSelectedItem } = useSinglePollStore(
		(state) => ({
			itemHandle: state.itemHandle,
			removeSelectedItem: state.removeSelectedItem,
		}),
		shallow
	)
	const handleCheckItem = (e: React.MouseEvent) => {
		if (e.ctrlKey) {
			itemHandle(uuid, 'ctrl')
		} else if (e.shiftKey) {
			itemHandle(uuid, 'shift')
		} else {
			itemHandle(uuid, 'click')
		}
	}
	return (
		<ItemLabelWrap
			isCascade={false}
			nestingLevel={0}
			isOnline={true}
			isVip={false}
			isSelected={status.checked}
			isAll={false}
			isMeeting={false}
			isNameBlue={false}
			onClick={handleCheckItem}
			onDoubleClick={() => removeSelectedItem(uuid)}
		>
			<IconCheckbox
				className="icon-checked"
				onClick={(e: React.MouseEvent) => {
					e.stopPropagation()
					itemHandle(uuid, 'ctrl')
				}}
				checked={status.checked}
			/>
			<div className="avatar">
				<Avatar value={mcc} size={24} />
			</div>
			<div className="name" title={mcc.name}>
				<pre data-mtid={uuid}>{mcc.name}</pre>
			</div>
		</ItemLabelWrap>
	)
}
